import React, { useState, useRef } from 'react';
import './App.scss'
import avatar from '../src/images/bozai.png'
import _ from 'lodash'
import classNames from 'classnames';
import { v4 as uuidV4 } from 'uuid'
import dayjs from 'dayjs';
// 评论列表数据
const defaultList = [
  {
    // 评论id
    rpid: 3,
    // 用户信息
    user: {
      uid: '13258165',
      avatar: '',
      uname: '周杰伦',
    },
    // 评论内容
    content: '哎哟，不错哦',
    // 评论时间
    ctime: '10-18 08:15',
    like: 88,
  },
  {
    rpid: 2,
    user: {
      uid: '36080105',
      avatar: '',
      uname: '许嵩',
    },
    content: '我寻你千百度 日出到迟暮',
    ctime: '11-13 11:29',
    like: 88,
  },
  {
    rpid: 1,
    user: {
      uid: '30009257',
      avatar,
      uname: '黑马前端',
    },
    content: '学前端就来黑马',
    ctime: '10-19 09:00',
    like: 66,
  },
]
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}
// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]
const App = () => {
  // 使用usestate控制渲染列表
  // 删除功能
  const [commentList, setCommentList] = useState(_.orderBy(defaultList, 'like', 'desc'))
  // 一上来就有排序
  const handledelete = (id) => {
    console.log(id, '得到的id值')
    setCommentList(commentList.filter(item => item.rpid !== id
      // 过滤掉点击删除传进来的id
    ))
  }
  //tab切换功能
  //点击得到type值，遍历时和type值进行匹配，如果相等就激活
  const [type, setType] = useState('hot')
  const handleTabChange = (type) => {
    console.log(type);
    setType(type)
    //排序功能
    // 根据最热和最新排序
    if (type === 'hot') {
      //根据最热
      setCommentList(_.orderBy(commentList, 'like', 'desc'))
      // 使用loash库，使用方法，需要排序的数据，排序关键字段，顺序还是逆序


    } else {
      setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
    }
  }
  //发表评论
  const [content, setContent] = useState('')
  const inputRef = useRef(null)
  const handlePublish = () => {
    setCommentList([
      ...commentList,
      {
        rpid: uuidV4(),//使用随机id
        user: {
          uid: '30009257',
          avatar,
          uname: '测试',
        },
        content: content,
        ctime: dayjs(new Date()).format('MM-DD hh:mm'),//评论时间
        //format可以保留需要的时间格式
        like: 66,
      },
    ])
    // 清空评论框
    setContent('')
    //重新聚焦，获取dom元素，然后focus()聚焦
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }
  return (
    <div className="app">
      {/* 导航 Tab */}
      <div className="reply-navigation">
        <ul className="nav-bar">
          <li className="nav-title">
            <span className="nav-title-text">评论</span>
            {/* 评论数量 */}
            <span className="total-reply">{10}</span>
          </li>
          <li className="nav-sort">
            {/* 高亮类名： active */}

            {tabs.map(item => <span key={item.type}
              // className={`nav-item ${type === item.type && 'active'}`}
              className={classNames('nav-item', { active: type === item.type })}
              // 使用classNames改写
              onClick={() => handleTabChange(item.type)}>{item.text}</span>)}
          </li>
        </ul>
      </div>
      <div className="reply-wrap">
        {/* 发表评论 */}
        <div className="box-normal">
          {/* 当前用户头像 */}
          <div className="reply-box-avatar">
            <div className="bili-avatar">
              <img className="bili-avatar-img" src={avatar} alt="用户头像" />
            </div>
          </div>
          <div className="reply-box-wrap">
            {/* 评论框 */}
            <textarea
              ref={inputRef}
              className="reply-box-textarea"
              placeholder="发一条友善的评论"
              value={content}
              onChange={(e) => setContent(e.target.value)}
            />
            {/* 发布按钮 */}
            <div className="reply-box-send">
              <div className="send-text" onClick={() => handlePublish()}>发布</div>
            </div>
          </div>
        </div>
        {/* 评论列表 */}
        <div className="reply-list">
          {/* 评论项 */}
          {commentList.map(item => (
            <div key={item.rpid} className="reply-item">
              {/* 头像 */}
              <div className="root-reply-avatar">
                <div className="bili-avatar">
                  <img
                    className="bili-avatar-img"
                    alt=""
                    src={item.user.avatar}
                  />
                </div>
              </div>
              <div className="content-wrap">
                {/* 用户名 */}
                <div className="user-info">
                  <div className="user-name">{item.user.uname}</div>
                </div>
                {/* 评论内容 */}
                <div className="root-reply">
                  <span className="reply-content">{item.content}</span>
                  <div className="reply-info">
                    {/* 评论时间 */}
                    <span className="reply-time">{item.ctime}</span>
                    {/* 评论数量 */}
                    <span className="reply-time">点赞数:{item.like}</span>
                    {/* <span className="delete-btn"> */}
                    {/* 删除条件：user.id === item.user.id */}
                    {user.uid === item.user.uid && <span className="delete-btn" onClick={() => handledelete(item.rpid)}> 删除
                    </span>}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
export default App